<template>
	<view>
		<view class="box" @click="task_statushow = true">
			<view class="text" >发放任务类型</view>
			<view class="div" >
				{{task_status_name}}
			</view>
			<view class="router">
				<u-icon name="arrow-right" color="#999"></u-icon>
			</view>
			<u-select 
				v-model="task_statushow" 
				mode="single-column" 
				:list="genderList" 
				@confirm="genderConfirm"
			></u-select>
		</view>
		<view v-if="task_explain != '' " style="padding: 20rpx;line-height: 45rpx;margin-top: 20rpx;">
			<view  >发放任务类型说明：</view>
			<view>
				<text>{{task_explain}}</text>
			</view>
		</view>
		<view class="btn" @click="issue">提交审核</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo:{},
				fileList:[],
				task_explain:'',
				regionShow:false,
				is_fb:false,
				regionParams: {
					province: true,
					city: true,
					area: false
				},
				name:'',
				industry:'',
				address:'点击设置地区',
				task_statushow: false,
                task_status_name:'固定金额发布',
                task_status:'1',
                genderList: [
					{
						value: '1',
						label: '固定金额发布'
					},
					{
						value: '2',
						label: '按浏览量发布'
					}
				]
			}
		},
		onLoad() {
			this.userInfo = uni.getStorageSync('userInfo');
			if(this.userInfo && this.userInfo.shop && this.userInfo.shop.task_status == 2){
				this.task_status_name  = '按浏览量发布';
				this.task_status = 2;
			}
			uni.request({
				url:'https://oa.yuxiang123.cn/api/shop/question',
				method:'POST',
				header:{"content-type":"application/x-www-form-urlencoded"},
				data:{
					type:5
				},
				success: (res) => {
					if(res.data.code == 1){
						this.task_explain=res.data.data;
					}
				}
			})
		},
		methods: {
			genderConfirm:function(e){
				this.task_status_name = e[0].label;
				this.task_status = e[0].value;
			},
			regionConfirm:function(e){
				this.address = e.province.label+'-'+e.city.label;
			},
			issue(){
				var that = this;
				uni.request({
					url: 'https://oa.yuxiang123.cn/api/shop/task_set',
					header:{
						"content-type": "application/x-www-form-urlencoded"
					},
					data:{
						token:uni.getStorageSync('token'),
						shop_id:this.userInfo.shop.id,
						task_status:this.task_status,
					},
					method: 'POST',
					success: (res) => {
						this.$Toast(res.data.msg)
						if(res.data.code == 1){
							setTimeout(function () {
								uni.navigateBack({
									delta:1
								})
							}, 800);
						}
					}
				})
					
			},
			delImg(index){
				this.fileList.splice(index,1)
			},
			selectImg:function(type){
				var that = this;
				// #ifdef MP-WEIXIN
				uni.chooseImage({
					count: 9, //默认9
					sizeType: ['original'],
					success: function (res) {
						for (let index = 0; index < res.tempFilePaths.length; index++) {
							that.upImg(res.tempFilePaths[index],'index')
						}
					}
				});
				// #endif
			},
			upImg:function(url,index){
				this.$show();
				var that = this;
				uni.uploadFile({
					url: 'https://oa.yuxiang123.cn/api/common/upload?id=1',
					filePath: url,
					name: 'file',
					success: (uploadFileRes) => {
						that.$hide()
						var data = JSON.parse(uploadFileRes.data);
						if(data.code == 1){
							if(that.fileList.length < 9){
								that.fileList.push(data.data.fullurl)
							}
						}else{
							uni.showToast({
								icon: 'none',
								title: '图片上传失败,换张图试试'
							})
						}
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
.bom{
	margin: 20upx;
	background-color: #FFFFFF;
	border-radius: 10upx;
	.bom_title{
		
	}
	.bom_img{
		display: flex;
		flex-wrap: wrap;
		.item{
			text-align: center;
			width: 30%;
			background-color: #f0f0f0;
			height: 200upx;
			border-radius: 10upx;
			margin-top: 20upx;
			color: #999999;
			margin-right: 20upx;
			position: relative;
			.icon{
				position: absolute;
				right: -10upx;
				top: -20upx;
				font-size: 40upx;
				background-color: #FFFFFF;
				border-radius: 50%;
				color: rgba($color: #333, $alpha: 0.5);
			}
			.item_icon{
				margin-top: 40upx;
				font-size: 40upx;
			}
			.item_text{
				color: #999999;
				font-size: 26upx;
				margin-top: 10upx;
			}
			image{
				width: 100%;
				height: 100%;
				border-radius: 10upx;
			}
			.seturl{
				position: absolute;
				bottom: 0;
				width: 100%;
				background-color: rgba($color: #333, $alpha: 0.5);
				border-radius: 0 0 10upx 10upx;
				color: #FFFFFF;
				font-size: 24upx;
				padding: 10upx 0;
			}
			.selectSet{
				background-color: rgba($color: red, $alpha: 0.5);
			}
		}
	}
}
.btn{
	background-color: #3662EC;
	color: #fff;
	width: 90%;
	margin: auto;
	margin-top: 50upx;
	text-align: center;
	padding: 20upx 0;
	font-size: 28upx;
	border-radius: 50upx;
}
.box{
	display: flex;
	align-items: center;
	padding: 30upx 20upx;
	border-bottom: 1px solid #f5f5f5;
	.text{
		
	}
	.div{
		flex: 1;
		text-align: right;
		margin-right: 20upx;
		color:#999;
	}
}
</style>
